<template>
	<div>
    <Breadcrumb :style="{margin: '15px 0',float: 'left'}">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>商品管理</BreadcrumbItem>
      <BreadcrumbItem>商品评价</BreadcrumbItem>
    </Breadcrumb>
    <Content class="layer-content">
      <Form inline>
        <FormItem>
          <Input style="width: 500px" v-model="keywords" search enter-button placeholder="请输入关键字" @on-search="doSearch" @submit.native.prevent/>
        </FormItem>
        <FormItem>
          <Select style="width:120px" placeholder="审核状态" clearable @on-change="selectAudit">
            <Option :value="0">待审核</Option>
            <Option :value="1">审核通过</Option>
            <Option :value="2">驳回</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button @click="reset">重置</Button>
        </FormItem>
      </Form>
      <Table border :columns="columns" :data="dataGrid"></Table>
      <HigPager v-model="query" :total="pageTotal" :init="Init"></HigPager>
    </Content>
    
    <Modal :footer-hide="true" v-model="dialogVisible" title="评价详情" width="70%">
      <div class="layer_top">
        <div class="name-area"> <span class="names">商品名称：</span>{{ dataVo.goodsName }}</div>
        <div class="name-area"> <span class="names">店铺名称：</span>{{ dataVo.shopName }}</div>
        <div class="name-area"><span class="names">评价分数：</span>{{ dataVo.goodsEvaluateStar }}</div>
        <div class="name-area"><span class="names">评价人：</span>{{ dataVo.evaluateUserName }}</div>
        <div class="name-area"><span class="names">联系电话：</span>{{ dataVo.evaluateUserMobile }}</div>
        <div class="name-area"><span class="names">评价时间：</span>{{ dataVo.postTime }}</div>
        <div class="name-area"><span class="names">审核状态：</span>{{ dataVo.auditText }}</div>
      </div>
      <div style="margin-top: 20px">
        <img v-for="(item,id) in dataFiles" :key="id" class="imgs" :src="item.fileUrl" alt="">
      </div>
      <Input v-model="dataForm.evaluateContent" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="评价内容" />
      <div class="middle_btn">
        <Button v-if="isAudit" type="primary" @click="Submit(1)">通过</Button>
        <Button v-if="isAudit" type="default" @click="Submit(2)">驳回</Button>
      </div>
    </Modal>
  </div>
</template>

<script scope>
export default {
  data () {
    return {
      dataVo:{},
      dataFiles: [],
      isPass: true,
      isAudit: false,
      pageTotal: 0,
      dialogVisible: false,
      keywords: null,
      dataGrid:[],
      dataForm: {
        shopEvaluateId: null,
        evaluateContent: null,
        auditStatus: null
      },
      query: {
        pageIndex: 1,
        pageSize: 15,
        equal: {}
      },
      columns: [
        {
          title: "商品图片",
          key: "goodsImg",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("img",{
                  attrs: {src: params.row.goodsImg},
                  style: {width: "50px",height: "46px"},
                },
              ),
            ])
          },
        },
        {
          title: "商品名称",
          key: "goodsName",
        },
        {
          title: "评价人",
          key: "evaluateUserName",
        },
        {
          title: "联系电话",
          key: "evaluateUserMobile",
        },
        {
          title: "评价分数",
          key: "goodsEvaluateStar",
        },
        {
          title: "审核状态",
          key: "auditText",
        },
        {
          title: "评价时间",
          key: "postTimeText",
        },
        {
          title: "操作",
          key: "action",
          width: 140,
          render: (h, params) => {
            return h("nav", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                    disabled: params.row.auditStatus !== 0,
                  },
                  on: {
                    click: () => {
                      this.btnSee(params.row,true)
                    },
                  },
                },
                "审核"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "default",
                    size: "small",
                  },
                  style: {
                    marginLeft: "10px",
                  },
                  on: {
                    click: () => {
                      this.btnSee(params.row,false)
                    },
                  },
                },
                "查看"
              )
            ])
          },
        },
      ]
    }
  },
  methods: {
    //审核
    Submit(status){
      this.dataForm.auditStatus = status
      new this.$rest({
        gateway: 'agroerp',
        service: "agroerp-mall",
        url: "/v1.0/shop/evaluates",
        data: {
          pojo: this.dataForm
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.$Message.success({
              content: '操作成功',
              duration: 1,
              onClose: ()=> {
                this.dialogVisible = false
              }
            })
            this.Init()
          } else {
            this.$Notice.warning({
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).put()
    },
    selectAudit(status) {
      if(!this.query.equal) this.query.equal = new Object()
      this.query.equal.auditStatus = status
      this.Init()
    },
    doSearch() {
      let sqlLike = {
        fields: ["org_name", "legal_mobile","legal_person","contact_mobile","union_credit_code"],
        keyword: this.keywords,
      }
      this.query.sqlLike = sqlLike
      this.query.pageIndex = 1
      this.Init()
    },
    reset() {
      delete this.query.sqlLike
      if(this.query.equal) delete this.query.equal.auditStatus
      this.keywords = null
      this.Init()
    },
    //获取列表
    Init(){
      new this.$rest({
        gateway: 'agroerp',
        service: 'agroerp-mall',
        url: '/v1.0/shop/evaluates/page',
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            this.pageTotal = res.data.data.count
            this.dataGrid = res.data.data.list
            for(let item of this.dataGrid) {
              item.postTimeText = this.$date(item.postTime,'yyyy-MM-dd HH:mm:ss')
              if(item.auditStatus === 0) {
                item.auditText = '待审核'
              } else if (item.auditStatus === 1) {
                item.auditText = '审核通过'
              } else if (item.auditStatus === 2) {
                item.auditText = '驳回'
              }
            }
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      }).get()
    },
    getFiles(id){
      new this.$rest({
        gateway: 'agroerp',
        service: 'agroerp-mall',
        url: '/v1.0/shop/evaluate/files/page',
        query: {
          equal: {
            shopEvaluateId: id
          },
          pageIndex: 1,
          pageSize: 21
        },
        action: (res) => {
          if (res.data.code === 20000 && res.data.data) {
            this.dataFiles = res.data.data.list
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      }).get()
    },
    //查看
    btnSee(e,bool){
      this.dataVo = e
      this.dataForm.shopEvaluateId = e.shopEvaluateId
      this.dataForm.evaluateContent = e.evaluateContent
      this.dialogVisible = true
      this.isAudit = bool
      this.getFiles(e.shopEvaluateId)
    }
  },
  created(){
    this.Init()
  }
}
</script>
<style lang="less" scoped>
.layer_top {
  display: flex; flex-wrap: wrap;
}
.name-area {
  padding: 3px 0; width: 33%;
}
.names {
  width: 100px; font-weight: 800; display: inline-block;
}
.imgs {
  width: 100px;
}
.yings {
  vertical-align: top;
}
</style>